<script setup lang="ts">
import { reactive } from 'vue';

const props: any = defineProps<{
    ujt: any;
}>();

const rfAsaiData: any = {
    comp: null,
    lang: {
        testtitle: '测试标题',
        richtest: '富文本编辑器',
    },
    rule: {
        richtest: {
            comp: 'AsaiRichEditor',
            style: {
                width: 'auto',
                height: '220px',
                'background-color': 'var(--cm2)',
                padding: 'var(--padding)',
            },
        },
    },
    data: reactive({
        testtitle: '',
        richtest:
            '<b>测试<font color="#dd2c2c">富文</font>本，</b><div>试试看</div>',
    }),
};
</script>

<template>
    <div class="as-col">
        <h1 class="as-col-li">HTML</h1>
        <div class="as-col-main">
            <AsaiForm :ujt="ujt" :asaidata="rfAsaiData"></AsaiForm>
        </div>
        <div class="as-col-li" v-html="rfAsaiData.data.richtest"></div>
    </div>
</template>

<style scoped lang="scss">
.as-col {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    overflow: hidden;
    .as-col-li {
        height: auto;
    }
    .as-col-main {
        flex-grow: 1;
        overflow: auto;
    }
}
</style>
